import React from 'react';

interface BubbleProps {
  color?: string;
  left?: number;
  children: React.ReactNode;
}

const Bubble: React.FC<BubbleProps> = ({ color, children, left }) => {
  return (
    <div
      style={{
        backgroundColor: color,
        marginLeft: `${left}px`,
      }}
      className={`my-5 inline-block cursor-pointer items-center justify-center rounded-full px-12 py-2 text-lg text-white shadow transition hover:shadow-xl`}
    >
      {children}
    </div>
  );
};

export default Bubble;
